
<template>
  <div v-wechat-title="title">
    <div class="outer_label">
      <img class="logo imgw" :src="require('@/assets/images/logo.png')" />
      <div class="title">测试卡系统</div>
    </div>
    <div class="loginwrap">
      <input
        type="tel"
        class="user font16"
        placeholder="手机号"
        v-model="phone"
      />
      <div class="pos-r wrapdiv">
        <input
          type="tel"
          class="messword font16"
          placeholder="短信验证码"
          v-model="smscode"
        />
        <div
          @click="getMessage"
          class="getcatp font16 pos-a"
          :style="`${msm == 0 ? '' : 'color:#dadada;'}`"
        >
          {{ getMessageBtn }}
        </div>
      </div>
      <van-button
        class="login_btn font18 bg-theme color-f mt74"
        @click.native="loginDo"
        round
        :loading="isBtnLoading"
        >登录</van-button
      >
      <!-- <van-button class="login_btn font18 border-theme color-theme mt24" @click.native="loginFastDo" round>手机快捷登录</van-button> -->

      <!-- 测试用的代码 -->
      <!-- <input type="text" class="user font16" placeholder="手机号" v-model="phone">
        <input type="text" class="user font16" placeholder="密码" v-model="password">
        <van-button class="login_btn font18 bg-theme color-f mt74" @click.native="login2" round :loading="isBtnLoading">登录</van-button> -->
    </div>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import util from "@/assets/js/public";
import { login, sendMes, getToken, loginFast } from "@/api/login";
import { Notify } from "vant";
import Axios from "axios";
import Qs from "qs";
const phoneRule = /^(1)\d{10}$/;
export default {
  name: "login",
  data() {
    return {
      isBtnLoading: false,
      phone: "",
      password: "",
      smscode: "",
      msm: 0,
      msmSetet: null,
      getMessageBtn: "获取验证码",
    };
  },
  computed: {
    btnText() {
      if (this.isBtnLoading) return "登录中...";
      return "登录";
    },
    title() {
      return this.$route.meta.title + "-" + process.env.VUE_APP_APPNAME;
    },
  },
  methods: {
    loginDo() {
      if (!this.phone) {
        Notify({ type: "warning", message: "请输入手机号" });
        return;
      }
      if (!this.smscode) {
        Notify({ type: "warning", message: "请输入验证码" });
        return;
      }
      if (phoneRule.test(this.phone)) {
        let phone = encodeURIComponent(util.encrypt(this.phone));
        this.$store
          .dispatch("Login", { phone, smscode: this.smscode })
          .then((res) => {
            console.log("登录成功");
            this.$router.push({ path: "/home" });
          })
          .catch((error) => {
            this.isBtnLoading = false;
          });
      } else {
        Notify({ type: "warning", message: "无效的手机号" });
      }
    },
    loginFastDo() {
      // Axios.defaults.timeout = 10000
      // Axios.defaults.baseURL = '/'
      // Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
      // Axios.defaults.withCredentials = true

      // // http request 拦截器
      // Axios.interceptors.request.use(
      // config => {
      //     config.headers = {
      //     'Content-Type': 'application/json' //  注意：设置很关键
      //     }
      //     return config
      // },
      // err => {
      //     return Promise.reject(err)
      // }
      // )

      // Axios.post('http://10.92.82.161:8088/maip/restLogin').then(res=>{
      //     alert(JSON.stringify(res));
      // }).catch(error=>{
      //     alert(JSON.stringify(error));
      // });
      // let gps=this.util.getQueryString();
      // this.$store.dispatch('Login',{token:gps.token}).then(res=>{
      //     this.$router.push({path:'/home'});
      // }).catch(error=>{
      // });
      let phone = encodeURIComponent(util.encrypt(this.phone));
      this.$store.dispatch("Login", { phone }).then((res) => {
        this.$router.push({ path: "/home" });
      });
      // login({token:gps.token}).then(res=>{
      // });
    },
    // 获取验证码
    getMessage(e) {
      if (!this.phone) {
        Notify({ type: "warning", message: "请先输入手机号" });
      } else if (phoneRule.test(this.phone)) {
        // todo
        if (this.msm == 0 && !this.isBtnLoading) {
          this.isBtnLoading = true;
          if (this.msmSet) {
            clearInterval(this.msmSet);
            this.msmSet = null;
          }
          sendMes(this.phone)
            .then((res) => {
              this.msm = 60;
              this.isBtnLoading = false;
              this.msmSet = setInterval(() => {
                this.msm--;
                if (this.msm == 0) {
                  clearInterval(this.msmSet);
                  this.msmSet = null;
                }
                this.getMessageBtn =
                  this.msm == 0 ? "获取验证码" : `重新发送(${this.msm})`;
              }, 1000);
            })
            .catch((error) => {
              this.isBtnLoading = false;
            });
        } else {
          Notify({ type: "warning", message: "不要频繁点击，请稍后再试" });
        }
      } else {
        Notify({ type: "warning", message: "无效的手机号" });
      }
    },

    // 测试用代码
    login2() {
      if (!this.phone || !this.password) {
        Notify({ type: "warning", message: "用户名与密码为必填项" });
      } else {
        var loginForm = {};
        loginForm.username = this.phone;
        loginForm.password = util.encrypt(this.password);
        loginForm.verifyCode = "";
        this.$store
          .dispatch("Login", loginForm)
          .then((res) => {
            this.loading = false;
            this.$router.push({ path: "/home/main" });
          })
          .catch((err) => {
            console.log(err);
            this.phone = "";
            this.password = "";
          });
      }
    },
  },
};
</script>
<style scoped>
.mt24 {
  margin-top: 24px;
}
.mt74 {
  margin-top: 74px;
}
.logo {
  display: block;
  margin: 98px auto 0;
}
.title {
  color: #222;
  font-size: 24px;
  margin-top: 19px;
  text-align: center;
}
.loginwrap {
  margin-top: 54px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 32px;
}
.user {
  width: 100%;
  height: 46px;
  border: none;
  border-bottom: 1px solid #eee;
  outline: none;
  padding-left: 2px;
}
.wrapdiv {
  width: 100%;
  height: 46px;
  margin-top: 32px;
}
.messword {
  width: 100%;
  height: 46px;
  border: none;
  border-bottom: 1px solid #eee;
  outline: none;
  padding-left: 2px;
  padding-right: 90px;
  vertical-align: top;
}
.getcatp {
  color: #0080cb;
  top: 12px;
  right: 0;
}
.login_logo {
  height: 100%;
}
.login_btn {
  width: 100%;
  height: 48px;
}
.border-theme {
  border: 1px solid #0080cb;
}
input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #bbbbbb;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #bbbbbb;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #bbbbbb;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #bbbbbb;
}
.van-button__content {
  font-size: unset;
}
.imgw {
  width: 63px;
  height: 61px;
}
</style>